import React from 'react';
import { Input, Switch, InputNumber, Tooltip } from 'antd';
import styles from './index.less';
import { InfoCircleOutlined } from '@ant-design/icons';

export default ({ rowKey, paging, initializationData, requestConfig, setProp }) => {
  return (
    <>
      <div className={styles.rowKeyControl}>
        <div>数据唯一key：</div>
        <Input
          size="small"
          value={rowKey || ''}
          onChange={(e) => {
            setProp((props) => (props.rowKey = e.target.value), 500);
          }}
          placeholder="请输入key"
        />
      </div>
      <div className={styles.pagingControl}>
        <div>
          分页：
          <Switch
            size="small"
            checkedChildren="开启"
            unCheckedChildren="关闭"
            checked={!!paging}
            onChange={(checked) => {
              setProp((props) => (props.paging = checked ? { size: 10 } : false), 500);
            }}
          />
        </div>
        <div>
          分页数：
          <InputNumber
            size="small"
            min={1}
            max={100}
            disabled={!paging}
            value={paging?.size || 10}
            onChange={(val) => {
              setProp((props) => (props.paging = { size: val }), 500);
            }}
            placeholder="请输入分页数"
          />
        </div>
      </div>
      <div className={styles.initializationControl}>
        <div>是否首次请求：</div>
        <Switch
          checkedChildren="开启"
          unCheckedChildren="关闭"
          checked={!!initializationData}
          onChange={(checked) => {
            setProp((props) => (props.initializationData = checked), 500);
          }}
        />
      </div>
      <div className={styles.requestUrlControl}>
        <div>
          接口请求地址
          <Tooltip placement="top" title="例：/test/query">
            <InfoCircleOutlined className={styles.requestUrlControlTitleIcon} />
          </Tooltip>
          ：
        </div>
        <Input
          size="small"
          value={requestConfig?.url || ''}
          onChange={(e) => {
            setProp((props) => (props.requestConfig = { url: e.target.value }), 500);
          }}
          placeholder="请输入请求地址"
        />
      </div>
    </>
  );
};
